//
//  ImageDemo.swift
//  firstFontAttrDemo
//
//  Created by liy on 2025/1/20.
//

import SwiftUI

struct ImageDemo: View {
  var body: some View {
    VStack {
      // 1.描述 抗锯齿 插值算法
      //      Image(.circle) //			可以使用字符串：Image("circle")
      //        .resizable(resizingMode: .stretch) // .tile 平铺方式
      //        .antialiased(true) // 抗锯齿
      //        .interpolation(.high) // .low 插值 .none

      // 2. 调整大小 resizable
      //      Image(.rec)
      //			九宫格缩放处理 上下左右10pt距离内的内容才缩放，用于处理拉伸图片时此区域不拉伸
      //        .resizable(capInsets: EdgeInsets(top: 10.0, leading: 10.0, bottom: 10.0, trailing: 10.0), resizingMode: .stretch) // stretch
      //        .frame(width: 300, height: 100)

      // 3. 渲染模式 renderingMode:
      //			original(不可改)，
      //			template(像素部分可以更改颜色)
      //			可以在右侧attribute inspector面板更改或者assets.xcassets图片属性面板中修改
      //      Image(.circle)
      //				.resizable(resizingMode: .stretch)
      //        .renderingMode(.template)
      //        .foregroundColor(.blue)

      //			4.宽高比 aspectRatio
      //      Image(.girl)
      //        .resizable(resizingMode: .stretch)
      //				.aspectRatio(contentMode: .fit) //fill缩放水平&垂直都充满 fit一个方向上充满

      //			5.使用系统符号图标
      //			.renderingMode(.original) 单色图标有像素的地方可以更改颜色
      //			.symbolRenderingMode(.hierarchical) 针对sfsymbol多色图标四种模式:
      // 单色: foregroundColor(.purple) 主辅色=紫色
      // 多色: foregroundColor(.purple) 辅色=紫色
      // 分层: foregroundColor(.purple) 辅色=紫色 forgroundColor可以替换成.foregroundStyle(.purple)
      // 调色板：foregroundStyle(.purple,.orange) 主色=紫色 辅色=橘色

      Image(systemName: "person.badge.plus")
        .frame(width: 200, height: 200)
        .fontWeight(.bold)
        .font(.system(size: 200))
				.symbolRenderingMode(.hierarchical)
				.foregroundStyle(.purple)
			
			//小案例
			HStack {
				Image(systemName: "flag")
				Image(systemName: "heart")
				Image(systemName: "bolt")
				Image(systemName: "star")
			}
			.font(.system(size: 50))
			.fontWeight(.bold)
			//符号变体
//			.symbolVariant(.square)
//			.symbolVariant(.slash)
//			.symbolVariant(.fill)
			.symbolVariant(.circle)
    }
  }
}

#Preview {
  ImageDemo()
}
